{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    <title>{{ post.title }} | Dbird's Home
    </title>
{% endblock %}

{% block custom_css %}
    <link rel="stylesheet" href="{% static 'lib/uikit/css/uikit.css' %}"/>
    <link rel="stylesheet" href="{% static 'lib/uikit/css/components/search.css' %}"/>
    <link rel="stylesheet" href="{% static 'lib/font-awesome/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <style type="text/css">
        .uk-article-meta > span {
            margin: 0 2px;
        }

        .uk-article-title {
            text-align: center;
        }

        .uk-article-meta {
            text-align: center;
        }

        .uk-article-meta > span > a {
            color: #999999;
        }

        .jiathis_style {
            margin-bottom: 20px;
        }

        .uk-article-meta {
            font-size: 15px;
        }

        .footer-context {
            margin: 10px auto;
            text-align: center;
        }

        #footer {
            background-color: #cbcbcb;
        }

        /*.uk-navbar-content > form {*/
        /*display: inline-block;*/
        /*}*/
    </style>
{% endblock %}

{% block left_article %}
    <article class="uk-article">

        <h5 class="uk-article-title">
            <a href="post-detail.html">{{ post.title }}</a>
        </h5>

        <p class="uk-article-meta">
            <span class="uk-icon-clock-o">{{ post.created_time }}</span>
            <span class="uk-icon-eye">浏览({{ post.click_nums }})</span>
            <span class="uk-icon-tags"><a href="#uyan_frame">评论({{ post.comment_nums }})</a></span>
        </p>

        <p>
            <img width="900" height="300"
                 src=""
                 alt="">
        </p>

        <p>{{ post.body }}</p>
        <div class="blog-tag">
            <span class="label label-primary">{{ post.tags }}</span>
        </div>
    </article>
    <hr>

    <!-- JiaThis Button BEGIN -->
    <div class="jiathis_style">s
        <span class="jiathis_txt">分享到：</span>
        <a class="jiathis_button_qzone">QQ空间</a>
        <a class="jiathis_button_tsina">新浪微博</a>
        <a class="jiathis_button_tqq">腾讯微博</a>
        <a class="jiathis_button_weixin">微信</a>
        <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
           target="_blank">更多</a>
        <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
    <!-- JiaThis Button END -->

    <!-- UY BEGIN -->
    <div id="uyan_frame"></div>
    <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
    <!-- UY END -->
{% endblock %}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何用django搭建简易博客</title>
    <script src="../static/lib/jquery/jquery-1.11.1.js"></script>
    <script src="../static/lib/uikit/js/uikit.js"></script>
    <link rel="stylesheet" href="../static/lib/uikit/css/uikit.css"/>
    <link rel="stylesheet" href="../static/lib/uikit/css/components/search.css"/>
    <link rel="stylesheet" href="../static/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->

    <style type="text/css">
        .uk-article-meta > span {
            margin: 0 2px;
        }

        .uk-article-title {
            text-align: center;
        }

        .uk-article-meta {
            text-align: center;
        }

        .uk-article-meta > span > a {
            color: #999999;
        }

        .jiathis_style {
            margin-bottom: 20px;
        }

        .uk-article-meta {
            font-size: 15px;
        }

        .footer-context {
            margin: 10px auto;
            text-align: center;
        }

        #footer {
            background-color: #cbcbcb;
        }

        /*.uk-navbar-content > form {*/
        /*display: inline-block;*/
        /*}*/
    </style>
</head>

<body>

<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

    <!--navigation start-->
    <nav class="uk-navbar uk-margin-large-bottom">
        <a href="index.html" class="uk-navbar-brand uk-hidden-small">dbird</a>
        <ul class="uk-navbar-nav uk-navbar-center">

            <li><a href=""><i class="uk-icon-home"></i>首页</a></li>
            <li><a href=""><i class="uk-icon-laptop"></i>开发</a></li>
            <li><a href=""><i class="uk-icon-user"></i>运维</a></li>
            <li><a href=""><i class="uk-icon-book"></i>杂谈</a></li>
            <li><a href="about.html"><i class="uk-icon-info-circle"></i>关于</a></li>
        </ul>

        <div class="uk-navbar-flip">
            <div class="uk-navbar-content">
                <form class="uk-search" data-uk-search="{source:'my-results.json'}">
                    <input class="uk-search-field" type="search" placeholder="输入关键字...">
                    <input type="submit" class="uk-button-primary" value="搜索">
                </form>
            </div>
        </div>
    </nav>
    <!--navigation end-->


    <div class="uk-grid">

        <div class="uk-width-medium-3-4">

            <article class="uk-article">

                <h5 class="uk-article-title">
                    <a href="post-detail.html">如何利用Django搭建博客</a>
                </h5>

                <p class="uk-article-meta">
                    <span class="uk-icon-clock-o">2017年3月15日 00:00</span>
                    <span class="uk-icon-eye">浏览(10)</span>
                    <span class="uk-icon-tags"><a href="#uyan_frame">评论(4)</a></span>
                </p>

                <p>
                    <a href="post-detail.html"><img width="900" height="300"
                                                    src=""
                                                    alt=""></a>
                </p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore
                    eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.</p>
                <div class="blog-tag">
                    <span class="label label-primary">标签1</span>
                    <span class="label label-primary">标签2</span>
                </div>
            </article>
            <hr>

            <!-- JiaThis Button BEGIN -->
            <div class="jiathis_style">s
                <span class="jiathis_txt">分享到：</span>
                <a class="jiathis_button_qzone">QQ空间</a>
                <a class="jiathis_button_tsina">新浪微博</a>
                <a class="jiathis_button_tqq">腾讯微博</a>
                <a class="jiathis_button_weixin">微信</a>
                <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
                   target="_blank">更多</a>
                <a class="jiathis_counter_style"></a>
            </div>
            <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
            <!-- JiaThis Button END -->

            <!-- UY BEGIN -->
            <div id="uyan_frame"></div>
            <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
            <!-- UY END -->


        </div>


        <div class="uk-width-1-4">
            <div class="uk-panel uk-panel-box uk-text-center">
                <img class="uk-border-circle" width="120" height="120"
                     src=""
                     alt="">
                <h3>dbird</h3>
                <p>90后技术男一枚</p>
                <a href="" class="uk-icon-github uk-icon-button"></a>
                <a class="uk-icon-weibo uk-icon-button"></a>
                <a class="uk-icon-wechat uk-icon-button"></a>
                <a class="uk-icon-qq uk-icon-button"></a>
            </div>
            <div class="uk-panel">
                <h3 class="uk-panel-title">文章归档</h3>
                <ul class="uk-list uk-list-line">
                    <li><a href="#">2017</a></li>
                    <li><a href="#">2016</a></li>
                </ul>
            </div>

            <div class="uk-panel">
                <h3 class="uk-panel-title">最新文章</h3>
                <ul class="uk-list uk-list-line">
                    <li><a href="">何如用Django搭建一个博客</a></li>
                    <li><a href="">如何进行高效的时间管理</a></li>
                    <li><a href="">毕业那些事</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="uk-container">
        <div class="footer-context">Copyright ©2017 by dbird &nbsp;&nbsp;|&nbsp;&nbsp;联系我&nbsp;
            <a href="mailto:dbird1995@163.com">dbird1995@163.com</a>
        </div>
    </div>
</footer>
</body>
</html>